<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Vue Router Props 三种模式示例</title>
</head>
<body>
<div id="app">
  <h2>Vue Router · Props 三种模式对照示例</h2>

  <button @click="goBool">1️⃣ 布尔模式：传 params</button>
  <button @click="goObject">2️⃣ 对象模式：固定 props</button>
  <button @click="goFunc">3️⃣ 函数模式：加工 props</button>

  <hr>

  <!-- 页面呈现区 -->
  <router-view></router-view>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<script>
/* ================================
   1. 定义三个组件
================================ */

const BoolPage = {
  props: ['id'],
  template: `<h3>布尔模式：接收到 id = {{ id }}</h3>`
};

const ObjectPage = {
  props: ['name'],
  template: `<h3>对象模式：固定 name = {{ name }}</h3>`
};

const FuncPage = {
  props: ['msg'],
  template: `<h3>函数模式：接收到 msg = {{ msg }}</h3>`
};

/* ================================
   2. 定义路由（重点：props 用法）
================================ */

const routes = [
  // 1️⃣ 布尔模式：自动把 params 映射为 props
  {
    path: '/bool/:id',
    component: BoolPage,
    props: true
  },

  // 2️⃣ 对象模式：props 固定值
  {
    path: '/object',
    component: ObjectPage,
    props: { name: '固定名字（来自对象模式）' }
  },

  // 3️⃣ 函数模式：灵活处理参数
  {
    path: '/func/:msg',
    component: FuncPage,
    props: route => ({
      msg: route.params.msg.toUpperCase() + '（加工后的）'
    })
  }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
});

/* ================================
   3. 创建应用
================================ */

Vue.createApp({
  methods: {
    goBool() {
      this.$router.push('/bool/888');
    },
    goObject() {
      this.$router.push('/object');
    },
    goFunc() {
      this.$router.push('/func/hello world');
    }
  }
})
.use(router)
.mount('#app');
</script>
</body>
</html>
